<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left" class="production-form">
      <el-divider content-position="left">基本信息</el-divider>
      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <el-form-item label="产品编号" prop="productId">
            <el-input v-model="form.productId" placeholder="请输入产品编号" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="销售订单号" prop="salesOrder">
            <el-input v-model="form.salesOrder" placeholder="请输入销售订单号" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="上传状态" prop="uploadStatus">
            <el-select v-model="form.uploadStatus" placeholder="请选择上传状态">
              <el-option label="未上传" value="未上传" />
              <el-option label="已上传" value="已上传" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="物料编码" prop="materialId">
            <el-input v-model="form.materialId" placeholder="请输入物料编码" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="物料名称" prop="materialName">
            <el-input v-model="form.materialName" placeholder="请输入物料名称" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="备注信息" prop="remarks">
            <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">数量信息</el-divider>
      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <el-form-item label="工单数量" prop="orderQuantity">
            <el-input v-model.number="form.orderQuantity" type="number" min="0" placeholder="请输入工单数量" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="已完成数量" prop="completedQuantity">
            <el-input v-model.number="form.completedQuantity" type="number" min="0" placeholder="请输入已完成数量" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="入库数量" prop="inboundQuantity">
            <el-input v-model.number="form.inboundQuantity" type="number" min="0" placeholder="请输入入库数量" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="未入库数量" prop="remainingQuantity">
            <el-input v-model.number="form.remainingQuantity" type="number" min="0" placeholder="请输入未入库数量" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="计划开始时间" prop="plannedStartDate">
            <el-date-picker clearable v-model="form.plannedStartDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择计划开始时间" style="width:100%" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="计划完成日期" prop="plannedFinishDate">
            <el-date-picker clearable v-model="form.plannedFinishDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择计划完成日期" style="width:100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">人员信息</el-divider>
      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <el-form-item label="创建人" prop="creator">
            <el-input v-model="form.creator" placeholder="请输入创建人" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="最后修改人" prop="lastModifier">
            <el-input v-model="form.lastModifier" placeholder="请输入最后修改人" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    <div style="margin: 16px 0 0 0;">
      <production-detail-table v-model="form.details" :show-add="false" :show-delete="false" :editable="false" />
    </div>
    
    <div class="dialog-footer" style="margin-top: 32px; text-align: center;">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { addProduction } from '@/api/production/production'
import { listProduction_detail } from '@/api/production_detail/production_detail'
import ProductionDetailTable from '@/views/production_detail/production_detail/ProductionDetailTable.vue'

export default {
  name: 'ProductionAdd',
  meta: { title: '新增工单' },
  components: { ProductionDetailTable },
  data() {
    return {
      form: {
        productId: null,
        salesOrder: null,
        uploadStatus: null,
        materialId: null,
        orderQuantity: null,
        completedQuantity: null,
        plannedStartDate: null,
        plannedFinishDate: null,
        remarks: null,
        materialName: null,
        inboundQuantity: null,
        remainingQuantity: null,
        creator: null,
        lastModifier: null,
        details: []
      },
      rules: {}
    }
  },
  created() {
    // 自动加载全部子表数据
    listProduction_detail({ pageNum: 1, pageSize: 9999 }).then(res => {
      this.form.details = res.rows || [];
    });
  },
  methods: {
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addProduction(this.form).then(response => {
            this.$modal.msgSuccess("新增成功")
            //返回上一级
            this.$router.back()
          })
        }
      })
    },
    //取消按钮
    cancel() {
      //取消之后返回上一级
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.production-form {
  background: #fff;
  padding: 24px 18px 8px 18px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(41,128,185,0.08);
}
</style>
